<template>
  <div>
    <div class="page-header">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="page-header__title">{{$t('pages.notices.page_title')}}</div>
        </el-col>
        <el-col :span="16" class="text-right">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="状态">
              <el-select :style="{width: '120px'}" v-model="formInline.status" placeholder="请选择阅读状态">
                <el-option label="全部" :value="1"></el-option>
                <el-option label="已读" :value="2"></el-option>
                <el-option label="未读" :value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-input :placeholder="$t('pages.help.input_search_placeholder')" v-model="formInline.keyword">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getDataList()"></i>
              </el-input>
            </el-form-item>

            <el-button type="danger"  @click="search">{{$t('common.search')}}</el-button>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <el-card class="table-container">
      <el-table :data="dataList">
        <!--序号-->
        <el-table-column prop="id" :label="$t('pages.notices.col_index')"></el-table-column>
        <!--发布时间-->
        <el-table-column prop="publishTm" :label="$t('pages.notices.col_publishTm')"></el-table-column>
        <!--更新内容-->
        <el-table-column prop="content" :show-overflow-tooltip="true" :label="$t('pages.notices.col_content')"></el-table-column>
        <!--操作-->

        <el-table-column
          label-class-name="text-center"
          class-name="text-center"
          prop="operate"
          :label="$t('pages.notices.col_opetate')"
          width="180">
          <template slot-scope="scope">
            <router-link class="text-info" to="/">查看详情</router-link>
          </template>
        </el-table-column>

        <!--发布人-->
        <el-table-column
          prop="publisher"
          label-class-name="text-center"
          class-name="text-center"
          :label="$t('pages.notices.col_publisher')"></el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
        @current-change="onCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import axios from '@/utils/axios'

  const data = {
    list: [
      {id: 0, publishTm: '2017-02-03', content: 'aaaaaaaaa', publisher: '大哥'},
      {id: 1, publishTm: '2017-02-03', content: 'aaaaaaaaa', publisher: '大哥'},
      {id: 2, publishTm: '2017-02-03', content: 'aaaaaaaaa', publisher: '大哥'},
      {id: 3, publishTm: '2017-02-03', content: 'aaaaaaaaa', publisher: '大哥'},
      {id: 4, publishTm: '2017-02-03', content: 'aaaaaaaaa', publisher: '大哥'},
      {id: 5, publishTm: '2017-02-03', content: 'aaaaaaaaa', publisher: '大哥'}
    ],
    pageSize: 10,
    totalPage: 10,
    currentPage: 2
  }

  export default {
    data () {
      return {
        formInline: {
          status: 1,
          keyword: ''
        },
        dataList: data.list || [],
        currentPage: data.currentPage || 1,
        pageSize: data.pageSize || 0,
        totalPage: data.totalPage || 0
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      /**
       * 获取数据
       */
      getDataList (arg = {}) {
        let params = Object.assign({
          ...this.formInline,
          currentPage: this.currentPage
        }, arg)
        console.log(params)
        // @TODO axios.get()
      },

      /**
       * 搜索数据
       */
      search () {
        this.currentPage = 1
        this.getDataList()
      },
      /**
       * 当前页码改变
       */
      onCurrentChange (page) {
        this.currentPage = page
        this.getDataList()
      }
    }
  }
</script>
